import React from 'react'
import { Form, Input } from 'antd';
const FormItem = Form.Item;

class CustomizedForm extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        return (

            <Form >
                {
                    this.props.info.map((item)=>{
                        return(
                            <FormItem
                                label={item.labelName}
                                hasFeedback
                                labelCol={{span: 4}}
                                wrapperCol={{span: 12}}
                                key={item.id}>
                                <Input value={item.labelName} />
                                {/*{getFieldDecorator(item.id)(<Input />)}*/}
                            </FormItem>
                        )
                    })
                }
            </Form>
        );
    }

}
const ModalForm = Form.create({
    // onFieldsChange(props, changedFields) {
    //    console.log(changedFields);
    // },
    // mapPropsToFields(props) {
    //     return {
    //         ...props.fields
    //     };
    // },
    onValuesChange(_, values) {
       console.log(values)
    },
})(CustomizedForm);

export default ModalForm;
// export default class Demo extends React.Component {
//     state = {
//         fields: {
//             username:{
//                 value: 'benjycui',
//             },
//             password:{
//                 value:'123'
//             }
//         },
//         info:[{
//             labelName:'姓名',
//             id:'username',
//             message:'请输入用户名'
//         },{
//             labelName:'密码',
//             id:'password',
//             message:'请输入密码'
//         }],
//         modalTitle:'111',
//         modalVisible:true
//
//     };
//     handleFormChange = (changedFields) => {
//         this.setState({
//             fields: { ...this.state.fields, ...changedFields },
//         });
//     };
//
//     render() {
//         const fields = this.state;
//         return (
//             <div>
//                 <ModalForm {...fields}  onChange={this.handleFormChange} />
//                 <pre className="language-bash">
//                   {JSON.stringify(fields.fields, null, 2)}
//                 </pre>
//             </div>
//         );
//     }
// }





